<template>
  <div>
    <Search/>
    <div class="shop-wrap">
      <ul class="shop-wrap-ul" v-if="shopList.total">
        <li class="shop-wrap-ul-li" v-for="(item, index) in shopList.data" :key="index">

          <div class="shop-street-liitem">
            <div class="shop-street-liitem-left">
              <!-- :style="{backgroundImage:'url('+item.logo+')'}" -->
              <div class="shop-street-liitem-left-content">
                <img :src="item.logo"/>
                <h3>{{ item.shop_name }}</h3>
                <p>{{ $t('好评率') }}{{item.praise_lv}}%</p>
                <p>{{item.deal_num}}{{ $t('人已抢') }}</p>
                <span @click="merchantShop(item)">{{ $t('进店逛逛') }}</span>
              </div>
              <div class="shop-street-liitem-left-bgimg">
                <img :src="item.logo">
              </div>
              <div class="shop-street-liitem-left-gray"></div>
            </div>

            <div class="shop-street-liitem-right" v-if="item.goodres.length != 0">
              <div class="shop-street-liitem-right-goodsitem" v-for="(itemk, indexk) in item.goodres" :key="indexk" @click="goGoodsDeatil(itemk.id)">
                <img :src="itemk.thumb_url"/>
                <p class="shop-street-liitem-right-goodsitem-title"><span>{{ itemk.goods_name }}</span></p>
                <p class="shop-street-liitem-right-goodsitem-spaniconprice">
                  <span>{{ itemk.currency_symbol }}</span>
                  <span class="shop-street-liitem-right-goodsitem-price">{{ itemk.min_price }}</span>
                </p>
              </div>
            </div>
            <Empty size="100" v-else />

          </div>
          
        </li>
      </ul>
      <Empty v-else />
      <div class="coupon-page" v-if="shopList.total">
        <Page :total="shopList.total" :page-size="shopList.per_page" @on-change="pageChange"></Page>
      </div>
    </div>

    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>

</template>

<script>
import { Search } from '@/components';
import { mapState } from "vuex";
import {goGoodsDeatil} from "@/common/utils"
export default {
  name:'ShopStreet',
  data(){
    return{
      page:1,
      shopList:{}
    }
  },
  computed: {
    ...mapState(["asItems", "isLoading","searchKey"]),
  },
  components:{
    Search
  },
  created() {
    this.getShopList();
  },
  methods:{
    goGoodsDeatil,
    //店铺列表
    getShopList(){
      this.$http.getShopList({
        page:this.page,
      }).then(res => {
        if (res.status === 200) {
          this.shopList = res.data;
          console.log(this.shopList);
        } else {
          this.$Message.error(mess);
        }
      })
    },

    merchantShop(item){
      this.$router.push({
        path: "/merchant",
        query: { shop_id: item.id }
      })
    },

    pageChange(page){
      this.page = page;
      this.getShopList();
    }
  }

}
</script>

<style lang="scss" scoped>
.shop{
  &-wrap{
    width:1200px;
    margin: 0 auto;
    &-ul{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top:30px;
      &-li{
        width:585px;
        background-color:#fff;
        margin-bottom:30px;
      }
    }
    .coupon-page{
      padding: 40px 0;
      text-align: center;
    }

  }
}

.shop-street-liitem{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    &-left{
      position:relative;
      overflow: hidden;
      vertical-align: middle;
      background-size: cover;
      width:180px;
      height:230px;
      margin:0 auto;
      &-content{
        width:100px;
        margin:0 auto;
        text-align:center;
        color:#fff;
        line-height:25px;
        margin-top:40px;
        position: absolute;
        z-index: 1000;
        left: 40px;
        img{
          border:none;
          width:60px;
          height:60px;
        }
        h3{
          font-weight: 700;
        }
        p{
          opacity: .7
        }
        span{
          border: 1px solid #fff;
          padding:0px 10px;
          display:inline-block;
          margin-top:5px;
          cursor:pointer;
        }
      }
      &-bgimg{
        position: absolute;
        z-index: 1;
        -webkit-filter: blur(5px);
        filter: blur(15px);
        transform: scale(1.2);
        img{
          width: 180px;
          height: 230px;
        }
      }
      &-gray{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        background: rgba(0,0,0,.2);
        z-index: -1;
        opacity: 0.5;
      }
    }
    
    &-right{
      width:405px;
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      padding-right:15px;
      &-goodsitem{
        width:128px;
        cursor:pointer;
        img{
          width:112px;
          height:112px;
        }
        &-title{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        margin-top:40px;
        padding-left:15px;
        &-spaniconprice{
          color:#f00;
          text-align:center;
        }
        &-price{
          font-weight: bold;
        }
      }
    }
}
</style>
